<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
   <!-- 引入react核心库 -->
   <script src="/node_modules/react/umd/react.development.js"></script>
   <!-- 引入react-dom 用于支持react操作dom -->
   <script src="/node_modules/react-dom/umd/react-dom.development.js"></script>
   <!-- jsx转换为浏览器可识别的代码 -->
   <script src="/node_modules/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script type="text/babel">
   /*
      * jsx语法规则
      * 1.定义虚拟DOM时,不要写引号。
      * 2.标签中混入JS表达式时要用{}
      * 3. 样式的类名指定不要用class,要用className
      * 4. 只允许有一个根节点（3种解决办法[用一个div标签包裹/<></>/React.Fragment标签]）
      *   4.1 3种解决办法的区别：前一种会生成多余的标签结构，后两种不会在浏览器中生成多余标签
      *   4.2 推荐用<></>
      * 5. 内联样式,要用style={{key:value}}的形式去写。
      * 6. 标签必须闭合
      * 7. 标签首字母
      *   7.1  (1),若小写字母开头,则将该标签转为htm中同名元素,若htm中无该标签对应的同名元素,则报错；
      */
      console.log('React',React)

      let count = 100
      // 内容必须要用标签包起来
      let item = <>
        <div className='item'>
          <h2 className='title'>中奖列表</h2>
          <p>总数：{count}</p>
          <input type="text" placeholder="请输入内容"/>
          <br/>
          {
         // 不被浏览器识别的标签首字母小写-报错
         // <myTable>MyTable</myTable>
         }
        {/* 
        // 不被浏览器识别首字母大写-报错
        <MyTable>MyTable</MyTable>
        */ }
        <ol className='list'>
          <li>戴沐白</li>
          <li style={{color:'red',fontSize:24}}>朱竹清</li>
          <li>奥斯卡</li> 
        </ol>
        </div>
        <h1 style={{color:'red'}}>写完作业啦吗???</h1>
      </>
      // 创建根节点
      let root = ReactDOM.createRoot(document.getElementById('root'))
      // 把虚拟dom渲染到页面中
      root.render(item)
      console.log('虚拟dom',item)
      console.log('真实dom',document.getElementById('root'))
</script>
</html>